<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 父组件 -->
    <cpn1 @itemclick="cpnClick"></cpn1>
    <!-- 监听自定义事件，并且在父组件中设置事件函数，
    这里不写括号就能默认把$emit()中间第二个参数传递过去 -->
  </div>
  <template id="cpn">
    <!-- 子组件 -->
    <div>
      <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
    </div>
  </template>
  <script>
    const cpn = { //子组件
      template: '#cpn',
      data() {
        return {
          categories: [
            { id: 'aaa', name: '热门推荐' },
            { id: 'bbb', name: '手机' },
            { id: 'vvv', name: '家电' },
            { id: 'ccc', name: '办公' }
          ]
        }
      },
      methods: {
        btnClick(item) {
          //此时要把item传递给父组件
          console.log(item.id);
          this.$emit('itemclick', item) //这个itemClick是我们自己设定的事件名称
        }
      }
    }
    var vm = new Vue({ //父组件
      el: '#app',
      data: {

      },
      components: {
        cpn1: cpn
      },
      methods: {
        cpnClick(item) {
          console.log('a');
          console.log(item.name);
        }
      }
    })
  </script>
</body>

</html>